import React, { useEffect, useState } from 'react';
import style from './Qian.module.css';
import axios from 'axios';
import a from '../img/5.jpg'
export default function Qian() {
    const [list, setlist] = useState([])
    const getlist = async () => {
        const res = await axios.get('http://localhost:3000/list')
        setlist(res.data)
        console.log(res.data);
    }



    useEffect(() => {
        getlist()

    }, [])
    const handelBuy = async (oldObj) => {
        // console.log(id);
        const newObj = { ...oldObj, number: oldObj.number + 1 }
        await axios.post('http://localhost:3000/add', newObj)
            .then(res => {
                if (res.data.code == 200) {
                    getlist()
                }
            })
    }
    return (
        <>
            <div className={style.container}>
                <div className={style.div1}>

                    {list.map((item) => {
                        return (
                            <div className={style.div2} key={item._id}>
                                <img src={item.img} alt={item.title} className={style.img} />
                                <div className={style.div3} key={item.id}>
                                    <span className={style.p1}>{item.title}</span><br />
                                    <span className={style.p2}>{item.sname}</span><br />
                                    <span className={style.p3}>￥{item.price}</span>
                                    <span>{item.number}</span>
                                </div>
                                <button onClick={() => handelBuy(item)}>立即购买</button>
                            </div>
                        )
                    })}

                </div>

            </div>

        </>
    )
}